<template>
  <div>
    <h2>{{ message }}</h2>
    <p>我是Home内容</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      message: "这里是首页",
      path: "home/news",
    };
  },
  // 我们可以通过Vue的生命周期函数来修改 document.title
  // 但是这样的做的话, 每一个组件都需要添加一个created生命周期函数, 代码重复度很高, 所以我们可以通过在路由配置index.js文件中监听路由转换事件, 来修改document.title
  /* created() {
    document.title = "首页"
    console.log("创建了");
  },
  destroyed() {
    console.log("销毁了");
  }, */

  // 以下代码是实现如何在切换组件的时候 保留组件状态
  // 首先在组件的data中记录当前路由的路径
  // 在路由设置文件 index.js文件中取消自动跳转
  // 使用keep-alive组件中的 activated() 生命周期钩子函数 在路由创建的时候, 使用 $router.push 方法设置路径
  activated() {
    this.$router.push(this.path);
  },
  // 使用导航守卫中的组件内守卫, 记录离开当前组件时候的路由路径
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // console.log(this.$route.path);
    this.path = this.$route.path;
    next();
  },
};
</script>
